<template>
    <template
        v-for="(item, index) in props.menuItems"
        :key="`${item.title}-${item.routerPath}`"
    >
        <!-- :key="`0-${index}`" -->
        <el-sub-menu 
            v-if="item.menuType == 'subMenu'"
            :index="item.routerPath"
        >
            <template #title>
                <el-icon>
                    <component :is="item.iconName" />
                </el-icon>
                <span>{{ item.title }}</span>
            </template>
            <HomeMenuItem v-if="item.children?.length > 0" :menuItems="item.children" />
        </el-sub-menu>
        <el-menu-item-group 
            v-else-if="item.menuType == 'menuItemGroup'"
            :title="item.title"
        >
            <HomeMenuItem v-if="item.children?.length > 0" :menuItems="item.children" />
        </el-menu-item-group>
        <el-menu-item 
            v-else-if="item.menuType == 'menuItem'"
            :index="item.routerPath"
        >
            <el-icon>
                <component :is="item.iconName" />
            </el-icon>
            <span>{{ item.title }}</span>
            <el-badge 
                :is-dot="item.idDot"
                :offset="[10,0]"
            >
                <div style="height: 100%;"></div>
            </el-badge>
            <HomeMenuItem v-if="item.children?.length > 0" :menuItems="item.children" />
        </el-menu-item>
    </template>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Document,
        Menu as IconMenu,
        Setting,
        House,
        Notification,
        Connection,
        Odometer,
        Lock,
        Search,
        Bell,
        FullScreen,
        Refresh,
        CircleClose,
        Warning,
        Fold,
        Expand
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    // 定义组件名字
    // defineOptions({
    //     name: "Self",
    // });
    const props = withDefaults(defineProps<{
        menuItems?: any[], 
        isCollapse?: boolean, //折叠面板
    }>(), {
        menuItems: () => [],
        isCollapse: false,
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // 'update:isCollapse': [data: boolean]
    }>()

    // const menuItems: Ref<any[]> = ref([
    //     {
    //         iconName: House,
    //         title: '首页',
    //         routerPath: '/',
    //         menuType: 'subMenu', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [
    //             {
    //                 iconName: House,
    //                 title: '首页',
    //                 routerPath: '/index',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: false,
    //                 offset: [],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Notification,
    //                 title: '看板',
    //                 routerPath: '/index2',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: false,
    //                 offset: [],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Connection,
    //                 title: '工作台',
    //                 routerPath: '/index',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: true,
    //                 offset: [10, 25],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Odometer,
    //                 title: '仓库',
    //                 routerPath: '/index2',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: true,
    //                 offset: [10, 25],
    //                 children: [],
    //             },
    //         ],
    //     },
    //     {
    //         iconName: IconMenu,
    //         title: '组件',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Document,
    //         title: '其他',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Setting,
    //         title: '配置',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Warning,
    //         title: '403',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Warning,
    //         title: '404',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    // ])
    
</script>

<style lang="scss" scoped>
    
</style>